<template>
  <div class="section_common">
    <div class="main">
      <el-form ref="form" label-width="100px">
        <!--<div class="detail">
          <span class="type">物品名称：{{item.itemName}}</span><br>
          <span class="start">型号：{{item.type}}</span><br>
          <span class="start">规格：{{item.spec}}</span><br>
          <span class="start">数量：{{item.num}}</span><br>
          <span class="start">单价：{{item.unitPrice}}</span><br>
          <span class="start">总价：{{item.totalPrice}}</span><br>
          <span class="start">采购原因：{{item.purchaseReason}}</span><br>
          <span class="start">采购链接：{{item.purchaseLink}}</span><br>

          &lt;!&ndash;<span class="type">物品名称：{{item.itemName}}</span>&nbsp;&nbsp;&nbsp;
          <span class="start">型号：{{item.type}}</span>&nbsp;&nbsp;&nbsp;
          <span class="start">规格：{{item.spec}}</span><br>
          <span class="start">数量：{{item.num}}</span>&nbsp;&nbsp;&nbsp;
          <span class="start">单价：{{item.unitPrice}}</span>&nbsp;&nbsp;&nbsp;
          <span class="start">总价：{{item.totalPrice}}</span><br>
          <span class="start">采购原因：{{item.purchaseReason}}</span>&nbsp;&nbsp;&nbsp;
          <span class="start">采购链接：{{item.purchaseLink}}</span>&nbsp;&nbsp;&nbsp;&ndash;&gt;
        </div>-->

        <el-form-item label="申请人" required>
          <el-input v-model="applicant" size="mini" readonly></el-input>
        </el-form-item>
        <el-form-item label="序号" required>
          <el-input v-model="id" size="mini" readonly></el-input>
        </el-form-item>
        <el-form-item label="采购原因" required>
          <el-input v-model="purchaseReason" size="mini" readonly></el-input>
        </el-form-item>
        <el-form-item label="附件">
          <!--<el-upload
            action="#"
            class="upload-demo"
            :on-change="handleChange"
            :file-list="fileList"
            :multiple="false"
            :limit="1"
            list-type
          >
            <el-button size="mini" type="primary">点击上传</el-button>
            <div slot="tip" class="el-upload__tip"></div>
          </el-upload>-->
          <!--<input id="file" class="file-upload-input" ref="inputer" type="file" accept="*/*" value="this.fileName">-->
          <div>
            <span><a target="_blank" :href="'https://view.officeapps.live.com/op/view.aspx?src=' + this.purchaseLink" style="color: black;text-decoration: none;background-color: white">{{this.fileName}}(可点击查看)</a></span>
          </div>
        </el-form-item>

        <el-form-item id="bhreason" style="display: none" label="驳回原因" required>
          <el-input v-model="bhreason" size="mini"></el-input>
        </el-form-item>

        <div class="upload_area">
            <van-steps direction="vertical" :active="active" active-icon="checked" active-color="#38f">
              <van-step v-if="oneShow">
                <h3>一级审批</h3>
                <van-image v-for="(item,index) in onespusers" :key="index" :src="item.avatar" width="60" height="60" style="margin-right: 20px;margin-bottom: 20px">
                  <p style="font-size: 10px ;justify-content: center">{{item.name}}</p>
                </van-image>
              </van-step>

              <van-step v-if="twoShow">
                <h3>二级审批</h3>
                <van-image v-for="(item,index) in twospusers" :key="index" :src="item.avatar" width="60" height="60" style="margin-right: 20px;margin-bottom: 20px">
                  <p style="font-size: 10px ;justify-content: center">{{item.name}}</p>
                </van-image>
              </van-step>

              <van-step v-if="threeShow">
                <h3>三级审批</h3>
                <van-image v-for="(item,index) in threespusers" :key="index" :src="item.avatar" width="60" height="60" style="margin-right: 20px;margin-bottom: 20px">
                  <p style="font-size: 10px ;justify-content: center">{{item.name}}</p>
                </van-image>
              </van-step>

              <van-step v-if="fourShow">
                <h3>四级审批</h3>
                <van-image v-for="(item,index) in fourspusers" :key="index" :src="item.avatar" width="60" height="60" style="margin-right: 20px;margin-bottom: 20px">
                  <p style="font-size: 10px ;justify-content: center">{{item.name}}</p>
                </van-image>
              </van-step>
              <p style="font-size: 15px ;justify-content: center">抄送人：</p>
              <van-image src="http://wework.qpic.cn/wwhead/duc2TvpEgSSWiaVLaJnssaQhAwV9wqgTueeE8IC2UCp8BG20aDWFTWZZ895sRylCibRzNRMoGqJ3w/0" width="60" height="60" style="margin-right: 20px;margin-bottom: 20px">
                <p style="font-size: 10px ;justify-content: center">邹威</p>
              </van-image>
              <van-image src="http://p.qlogo.cn/bizmail/ZPPn13Xo62F3eQicpZlTyyEicYk2KVwmqicuLllkeCCoj0xm4wXNGsiaDw/0" width="60" height="60" style="margin-right: 20px;margin-bottom: 20px">
                <p style="font-size: 10px ;justify-content: center">李佩蓝</p>
              </van-image>
            </van-steps>
        </div>

        <van-dialog title="   " v-model="bhshow" show-cancel-button :before-close="chargeBtn" message-align="left">
          <el-form-item label="驳回原因" required>
            <el-input v-model="bhreason" type="textarea" :autosize="{ minRows: 4}"></el-input>
          </el-form-item>
        </van-dialog>


        <el-form-item>
          <el-button id="isAgree" v-bind:disabled="isShow" type="primary" size="mini" @click="submitAgree">{{message}}</el-button>
          <el-button id="isNotAgree" v-bind:disabled="isShow" type="warning" size="mini" @click="submitNotAgree">{{message1}}</el-button>
        </el-form-item>

      </el-form>
    </div>
  </div>
</template>

<script>
  import Vue from 'vue';
  import { Calendar,Form  } from "vant";
  import { Image as VanImage,Toast,Picker,Popup,Dialog} from 'vant';

  Vue.use(Calendar);
  Vue.use(Form);
  Vue.use(Picker);
  Vue.use(Popup);
  Vue.use(VanImage);
  Vue.use(Dialog)
  Vue.use(Toast)
export default {

  data() {
    return {
      id:'',
      nowUser:"",
      applicant:'',

      purchaseReason:'',
      purchaseLink:'',
      fileName:'',

      bhreason:"",
      bhshow:false,

      isShow:false,
      message:'同意',
      message1:'驳回',
      active:"-1",//步骤索引,从0开始
      oneShow:false,//审批是否显示
      onespusers:[],
      twoShow:false,
      twospusers:[],
      threeShow:false,
      threespusers:[],
      fourShow:false,
      fourspusers:[],

    };
  },
  created() {
    this.nowUser=JSON.parse(localStorage.getItem('userInfo')).userId;
    this.id=this.$route.params.purchaseDetailId;
    this.selLeaderByApplicaId();
    this.getDetail();
  },

  methods: {
    /*formatArea(data,curr){
      if(data){
        for(let i=0;i<data.length;i++){
          console.log(data[i])
          curr.push({
            label:data[i],
            value:data[i],
          })
        }
        console.log(curr)
      }
    },*/

    //查找对应用户的上级领导进行审批
    selLeaderByApplicaId(){
      this.$https.post('/mobiles/getPurchaseLeader', {
        cgId:this.id,
        type:"批量采购"
      }).then((res)=>{
        //展示审批流程
        if (res.data.data.onespusers && res.data.data.onespusers.length>0){
          this.oneShow=true;
          this.onespusers=res.data.data.onespusers;
        }else{
          this.oneShow=false;
          this.onespusers=[];
        }
        if (res.data.data.twospusers && res.data.data.twospusers.length>0){
          this.twoShow=true;
          this.twospusers=res.data.data.twospusers;
        }else{
          this.twoShow=false;
          this.twospusers=[];
        }
        if (res.data.data.threespusers && res.data.data.threespusers.length>0){
          this.threeShow=true;
          this.threespusers=res.data.data.threespusers;
        }else{
          this.threeShow=false;
          this.threespusers=[];
        }
        if (res.data.data.fourspusers && res.data.data.fourspusers.length>0){
          this.fourShow=true;
          this.fourspusers=res.data.data.fourspusers;
        }else{
          this.fourShow=false;
          this.fourspusers=[];
        }
      }).catch(err => {
        console.log(err);
      })
    },
    //根据传递的招聘申请id获取相应的申请信息
    getDetail(){
      //console.log(id)
      this.$https.post('/mobiles/getPhotographPurchaseQPDetail', {
        userId:this.nowUser,
        cgId:this.id,
      }).then((res)=>{
        console.log(res.data.data);
        this.applicant = res.data.data.applicant;
        this.purchaseReason = res.data.data.purchaseReason;
        this.purchaseLink = res.data.data.filePath;
        this.fileName = res.data.data.fileName;
        this.active=res.data.data.state-1
        if (res.data.data.showAgree=="0"){
          this.message='已同意';
          this.isShow=true;
        }

        /*this.applicant = res.data.data.applicant;
        this.itemName = res.data.data.itemName;
        this.type = res.data.data.type;
        this.spec = res.data.data.spec;
        this.unitPrice = res.data.data.unitPrice;
        this.totalPrice = res.data.data.totalPrice;
        this.purchaseReason = res.data.data.purchaseReason;
        this.purchaseLink = res.data.data.purchaseLink;
        this.num = res.data.data.num;

        if (res.data.data.agree=='通过'){
          this.message='已同意';
          this.isShow=true;
        }else if (res.data.data.agree=='不通过'){
          this.message1='已驳回';
          this.isShow=true;
          document.getElementById("bhreason").style.display= "";
          this.bhreason=res.data.data.bhreason;
        }else {
          if (res.data.data.showAgree=="0"){
            this.message='已同意';
            this.isShow=true;
          }
        }
        console.log(res.data.data.state)
        this.active=res.data.data.state-1;*/
        // this.active=0;
        // showAgree


      }).catch(err => {
        console.log(err);
      })
    },
    // 返回
    goBack() {
      this.$router.go(-1);
    },
    // 提交同意
    submitAgree() {
      this.isShow=true;
      this.$https.post('/mobiles/isAgreePhotographQPPurchase', {
        userId:this.nowUser,
        cgId:this.id,
      }).then(res => {
        res;
        Toast("已同意");
        this.message='已同意';
        this.isShow=true;
        this.getDetail();//找到对应的页面详情，及领导信息
        //JSON.parse(localStorage.getItem('userInfo')).userId;
        //this.$router.go(-1);

      }).catch(err => {
        console.log(err)
      });
    },
    //驳回
    submitNotAgree() {
      this.bhshow=true;
    },
    chargeBtn(action,done){
      if (action==='cancel'){
        done();
      }else if (action==='confirm'){
        this.show=false;
        this.$https.post('/mobiles/isAgreePhotographQPPurchase', {
          userId:this.nowUser,
          cgId:this.id,
          bhreason:this.bhreason,
        }).then(res => {
          res;
          Toast("已驳回");
          this.message1="已驳回";
          this.isShow=true;
          this.getDetail();//找到对应的页面详情，及领导信息
          done();
        }).catch(err => {
          console.log(err)
        });
      }
    },
    /*onSubmit() {
      if (!this.isNull()) return false;
      //提交事件
      this.show=false;
      this.$https.post('/mobiles/photographPurchase', {
        userId:this.nowUser,
        itemName:this.itemName,
        type:this.type,
        spec:this.spec,
        num:this.num,
        unitPrice:this.unitPrice,
        totalPrice:parseInt(this.num) * parseFloat(this.unitPrice),
        purchaseReason:this.purchaseReason,
        purchaseLink:this.purchaseLink,
      }).then(res => {
        res.data;
        Toast("申请成功");
        this.goBack();
      }).catch(err => {
        console.log(err)
      });
    },
    //判断相关数据是否为空
    isNull() {
      if (this.itemName == '') {
        this.$toast("请选择物品名称");
        return false;
      }
      if (this.type=='') {
        this.$toast("请选择型号");
        return false;
      }
      if (this.spec=='') {
        this.$toast("请选择规格");
        return false;
      }
      if (this.num=='') {
        this.$toast("数量不能为空");
        return false;
      }
      if (this.purchaseReason=='') {
        this.$toast("采购原因不能为空");
        return false;
      }
      if (this.purchaseLink=='') {
        this.$toast("采购链接不能为空");
        return false;
      }
      return true;
    },*/
  },
};
</script>

<style lang="scss" scoped>
.main {
  display: flex;
  justify-items: center;
  margin: 0 auto;
  .el-form {
    padding-right: 10px;
    .el-form-item {
      .el-form-item__label {
        line-height: 16px;
      }
      margin-bottom: 5px;
    }
  }
  .detail {
    font-size: small;
    text-align: left;

  }
}
</style>
